ReactNative与Android原生交互、通信、传参、回调、填坑 |
您所在的位置：网站首页 › react native调用原生方法 › ReactNative与Android原生交互、通信、传参、回调、填坑 |
ReactNative与Android原生交互、通信、传参、回调、填坑
|
文末有相关问题解决， 如：null is not an object(evaluating 'xxx.xxx') 1、创建模块 // ReactNativeModule.java public class ReactNativeModule extends ReactContextBaseJavaModule { public ReactNativeModule(ReactApplicationContext context) { super(context); } @Override public String getName() { //返回值与 ReactNative 中 NativeModules.nativeView 一致 return "nativeView"; } @ReactMethod public void 给js调用的方法(){ //1、必须使用@ReactMethod注解 //2、必须使用void } }2、 注册模块 // ExampleReactPackage.java public class ExampleReactPackage implements ReactPackage { @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List createNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList(); modules.add(new ReactNativeModule(reactContext)); return modules; } }3、添加注册模块 根据官方文档 ExampleReactPackage 需要在MainApplication.java文件的getPackages方法中提供。 我按文档添加后并没有成功，报：null is not an object(evaluating ‘xxx.xxx’) 解决方案：在添加ReactRootView组件的Activity中 4、关于传参 常见参数类型这里就不说了，主要说一下js传json类型，这边怎么接收 public class ReactNativeModule extends ReactContextBaseJavaModule { ... @ReactMethod public void 给js调用的方法(ReadableMap map){ //1、json类型用ReadableMap来接收 } }5、关于回调 因为提供给js调用的方法返回是void，所以ReactNative提供了回调函数:Callback public class ReactNativeModule extends ReactContextBaseJavaModule { ... @ReactMethod public void 给js调用的方法(ReadableMap map, Callback callback){ callback.invoke(Object... args); //1、invoke()这里普通类型都没有问题 //2、invoke()传Json、HashMap、List等类型，只能使用 WritableMap //这边举例传HashMap JSONObject json = new JSONObject(hashMap); WritableMap wMap = BundleJSONConverter.jsonToReact(json); callback.invoke(null, wMap); //使用到BundleJSONConverter类，下面提供源码 } }BundleJSONConverter.java /** * Written by Andrzej Porebski Nov 14/2015 * Copyright (c) 2015, Andrzej Porebski * * Modified by YunJiang.Fang * Copyright (c) 2015, YunJiang.Fang */ import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.bridge.ReadableMapKeySetIterator; import com.facebook.react.bridge.ReadableType; import com.facebook.react.bridge.WritableArray; import com.facebook.react.bridge.WritableMap; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import java.util.Iterator; public abstract class BundleJSONConverter { public static JSONObject reactToJSON(ReadableMap readableMap) throws JSONException { JSONObject jsonObject = new JSONObject(); ReadableMapKeySetIterator iterator = readableMap.keySetIterator(); while(iterator.hasNextKey()){ String key = iterator.nextKey(); ReadableType valueType = readableMap.getType(key); switch (valueType){ case Null: jsonObject.put(key,JSONObject.NULL); break; case Boolean: jsonObject.put(key, readableMap.getBoolean(key)); break; case Number: try { jsonObject.put(key, readableMap.getInt(key)); } catch(Exception e) { jsonObject.put(key, readableMap.getDouble(key)); } break; case String: jsonObject.put(key, readableMap.getString(key)); break; case Map: jsonObject.put(key, reactToJSON(readableMap.getMap(key))); break; case Array: jsonObject.put(key, reactToJSON(readableMap.getArray(key))); break; } } return jsonObject; } public static JSONArray reactToJSON(ReadableArray readableArray) throws JSONException { JSONArray jsonArray = new JSONArray(); for(int i=0; i case Null: jsonArray.put(JSONObject.NULL); break; case Boolean: jsonArray.put(readableArray.getBoolean(i)); break; case Number: try { jsonArray.put(readableArray.getInt(i)); } catch(Exception e) { jsonArray.put(readableArray.getDouble(i)); } break; case String: jsonArray.put(readableArray.getString(i)); break; case Map: jsonArray.put(reactToJSON(readableArray.getMap(i))); break; case Array: jsonArray.put(reactToJSON(readableArray.getArray(i))); break; } } return jsonArray; } public static WritableMap jsonToReact(JSONObject jsonObject) throws JSONException { WritableMap writableMap = Arguments.createMap(); Iterator iterator = jsonObject.keys(); while(iterator.hasNext()) { String key = (String) iterator.next(); Object value = jsonObject.get(key); if (value instanceof Float || value instanceof Double) { writableMap.putDouble(key, jsonObject.getDouble(key)); } else if (value instanceof Number) { writableMap.putInt(key, jsonObject.getInt(key)); } else if (value instanceof String) { writableMap.putString(key, jsonObject.getString(key)); } else if (value instanceof JSONObject) { writableMap.putMap(key,jsonToReact(jsonObject.getJSONObject(key))); } else if (value instanceof JSONArray){ writableMap.putArray(key, jsonToReact(jsonObject.getJSONArray(key))); } else if (value == JSONObject.NULL){ writableMap.putNull(key); } } return writableMap; } public static WritableArray jsonToReact(JSONArray jsonArray) throws JSONException { WritableArray writableArray = Arguments.createArray(); for(int i=0; i writableArray.pushDouble(jsonArray.getDouble(i)); } else if (value instanceof Number) { writableArray.pushInt(jsonArray.getInt(i)); } else if (value instanceof String) { writableArray.pushString(jsonArray.getString(i)); } else if (value instanceof JSONObject) { writableArray.pushMap(jsonToReact(jsonArray.getJSONObject(i))); } else if (value instanceof JSONArray){ writableArray.pushArray(jsonToReact(jsonArray.getJSONArray(i))); } else if (value == JSONObject.NULL){ writableArray.pushNull(); } } return writableArray; } }6、js中调用 import React from 'react'; import { NativeModules } from 'react-native'; class NativeDemo extends Component { jsByAndroid() { NativeModules.nativeView.给js调用的方法( {'key':'value'}, (erreor, callback) => { if(erreor){ //java中callback.invoke(null, wMap) //第一个参数是erroer }else{ //java中callback.invoke(null, wMap) //第二个参数是callback } } ) } } |
【本文地址】